<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onclick = function () {
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('div01');

            // 改变样式, 执行之后就变成函数内的内容
            /*function fnChange() {
                oDiv.style.color = 'red';
                oDiv.style.width = '100px';
                oDiv.style.background = 'green';
                oDiv.style.height = '100px';
            }
             直接调用函数
             fnChange();
            // 点击调用函数
            oBtn.onclick = fnChange;
            */

            // 直接定义函数, 此函数是匿名函数, 最终写法
            //onclick 鼠标点击事件
            oBtn.onclick = function() {
                oDiv.style.color = 'red';
                oDiv.style.width = '100px';
                oDiv.style.background = 'green';
                oDiv.style.height = '100px';
            };
        }
    </script>
</head>

<body>
    <input type="button" value="改变样式" id="btn">
    <div id="div01">这是一个div</div>
</body>
</html>